<template>
  <div class="my-pending-main">
    <div class="head-row">
      <div class="left-head">
        <img class="head-logo" src="@/assets/dashboard/appIcons/dizhishenling.png" alt="">
        <span class="head-title">低值申领</span>
        <div class="add-apply-btn" @click="openSubmit">
          <img class="btn-img" src="@/assets/dashboard/assetsApplication/white_plus.png" alt="">
          <span class="btn-text">新增申请</span>
        </div>
      </div>
      <div class="right-head">
        <div class="status-btn">
          <span @click="showStatusSearch=!showStatusSearch">审核状态</span>
          <img @click="showStatusSearch=!showStatusSearch" src="@/assets/dashboard/myPending/arrow.png" alt="">
          <div class="status-popup" v-if="showStatusSearch">
            <div class="status-item" @click="changeAuditStatus('')">全部状态</div>
            <div class="status-item" @click="changeAuditStatus('0')">审核中</div>
            <div class="status-item" @click="changeAuditStatus('1')">已同意</div>
            <div class="status-item" @click="changeAuditStatus('2')">已驳回</div>
            <div class="status-item" @click="changeAuditStatus('3')">回退上级</div>
          </div>
        </div>
        <div class="date-btn">
          <span @click="showDateSearch=!showDateSearch">日期筛选</span>
          <img @click="showDateSearch=!showDateSearch" src="@/assets/dashboard/myPending/arrow.png" alt="">
          <date-search
            v-if="showDateSearch"
            :now-apply-time-start="headFormData.applyTime[0]"
            :now-apply-time-end="headFormData.applyTime[1]"
            :now-audit-time-start="headFormData.auditTime[0]"
            :now-audit-time-end="headFormData.auditTime[1]"
            @save="saveDateSearch"
          ></date-search>
        </div>
      </div>
    </div>
    <div class="content-row">
      <div class="left-menu" :class="{ small: !showMenu }">
        <div class="top">
          <div class="search-box">
            <img src="@/assets/dashboard/myPending/search.png" alt="">
            <input type="text" :placeholder="showMenu?'请输入单号':''" v-model="headFormData.keyword" />
          </div>
          <div
            class="menu-item"
            :class="{ active: item.active }"
            v-for="(item,index) in menuList"
            :key="index"
            @click="changeMenu(index)"
          >
            <img :src="item.active ? item.imgActive : item.img" alt="">
            <span v-if="showMenu">{{ item.text }}</span>
          </div>
        </div>
        <div class="bottom">
          <img src="@/assets/dashboard/myPending/toggle1.png" alt="" @click="showMenu=true" v-if="!showMenu">
          <img src="@/assets/dashboard/myPending/toggle2.png" alt="" @click="showMenu=false" v-else>
        </div>
      </div>
      <div class="right-content">
        <div class="list-box">
          <div class="table-box">
            <div class="table-content">
              <el-table
                border
                height="100%"
                max-height="100%"
                :data="tableData" class="table-table">
                <el-table-column
                  prop="documentNumber"
                  label="申领单号"
                  width="190"
                >
                </el-table-column>
                <el-table-column
                  prop="orderType"
                  label="审核状态"
                  width="120"
                >
                  <template slot-scope="scope">
                    <div class="td-orderType">
                      <div class="td-orderType-btn btn0" v-if="scope.row.orderType==='0'">未提交</div>
                      <div class="td-orderType-btn btn1" v-if="scope.row.orderType==='1'">审核中</div>
                      <div class="td-orderType-btn btn2" v-if="scope.row.orderType==='2'">回退上级</div>
                      <div class="td-orderType-btn btn3" v-if="scope.row.orderType==='3'">已同意</div>
                      <div class="td-orderType-btn btn4" v-if="scope.row.orderType==='4'">被驳回</div>
                      <el-tooltip class="item" effect="dark" placement="top">
                        <div slot="content">
                          <span style="line-height:22px">任务节点：未启动</span>
                          <br/>
                          <span style="line-height:22px">当前审批人：王五六</span>
                        </div>
                        <div class="td-orderType-detail" v-if="scope.row.orderType==='1'">详情</div>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="number"
                  label="申领物品总数"
                  width="110"
                >
                  <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" placement="top">
                      <div slot="content">
                        <span style="line-height:22px">激光打印机*10台</span>
                        <br/>
                        <span style="line-height:22px">显示器*10台</span>
                        <br/>
                        <span style="line-height:22px">圆珠笔*10支</span>
                      </div>
                      <span class="td-number">{{ scope.row.number || 0 }}</span>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="applyDeptName"
                  label="申请部门"
                  width="200"
                >
                </el-table-column>
                <el-table-column
                  prop="applyReason"
                  label="申请理由"
                  width="200"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="userName"
                  label="收货人"
                  width="90"
                >
                </el-table-column>
                <el-table-column
                  prop="storageLocationName"
                  label="存放位置"
                  width="200"
                >
                </el-table-column>
                <el-table-column
                  prop="expectedDeliveryDate"
                  label="期望日期"
                  width="130"
                >
                </el-table-column>
                <el-table-column
                  prop="applyTime"
                  label="申请时间"
                  width="180"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="130"
                >
                  <template slot-scope="scope">
                    <div class="td-operate">
                      <span class="td-operate-btn">查看</span>
                      <span class="td-operate-btn danger" v-if="scope.row.orderType==='1'">撤销</span>
                      <span class="td-operate-btn" v-if="scope.row.orderType==='3'">复制</span>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="table-page">
              <span class="total">共{{ listPage.total }}条数据</span>
              <el-pagination
                background
                layout="prev, pager, next"
                :total="listPage.total"
                @current-change="handleCurrentChangeList"
                @handleSizeChange="handleSizeChangeList"
                :page-size="listPage.pageSize"
                :current-page="listPage.pageNo"
                :pager-count="5"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <claiments-submit
      v-if="showSubmit.show"
      :infoData="showSubmit.infoData"
      @close="closeSubmit"
    ></claiments-submit>
  </div>
</template>

<script>
import { mapState } from "vuex";
import menuImg0 from '@/assets/dashboard/assetsApplication/menu_0.png'
import menuImg1 from '@/assets/dashboard/assetsApplication/menu_1.png'
import menuImg2 from '@/assets/dashboard/assetsApplication/menu_2.png'
import menuImg0_active from '@/assets/dashboard/assetsApplication/menu_0_active.png'
import menuImg1_active from '@/assets/dashboard/assetsApplication/menu_1_active.png'
import menuImg2_active from '@/assets/dashboard/assetsApplication/menu_2_active.png'
import guzishengou from '@/assets/dashboard/appIcons/guzishengou.png'
import dizhishengou from '@/assets/dashboard/appIcons/dizhishengou.png'
import dizhishenling from '@/assets/dashboard/appIcons/dizhishenling.png'
import diaoboshenqing from '@/assets/dashboard/appIcons/diaoboshenqing.png'
import jieyongshenqing from '@/assets/dashboard/appIcons/jieyongshenqing.png'
import baofeishenqing from '@/assets/dashboard/appIcons/baofeishenqing.png'
import dateSearch from '../../components/assetsApplication/dateSearch.vue'
import claimentsSubmit from './submit/claimentsSubmit'

export default {
  name: "myAssetsApplicationClaiments",
  props: {},
  components: {
    dateSearch, claimentsSubmit
  },
  data() {
    return {
      headFormData: {
        status: '',
        applyTime: ['',''],
        auditTime: ['',''],
        departmentId: '',
        auditStatus: '',
        applyType: '',
        keyword: '',
      },
      menuList: [
        { text: '全部', img: menuImg0, imgActive: menuImg0_active, value: '', active: true },
        { text: '审核中', img: menuImg1, imgActive: menuImg1_active, value: '1', active: false },
        { text: '已审核', img: menuImg2, imgActive: menuImg2_active, value: '2', active: false },
      ],
      showMenu: true,
      tableData: [], //列表格式数据
      listPage: {
        total: 1000,
        pageSize: 10,
        pageNo: 1,
      },
      showDateSearch: false,
      showStatusSearch: false,
      showSubmit: {
        show: false,
        type: 'add',
        infoData: {},
      },
    }
  },
  computed: {
    ...mapState(['myInfo']),
    nowMenu() {
      let menu = this.menuList.find((item)=>{
        return item.active
      })
      return menu ? menu.value : ''
    },
  },
  mounted() {
    this.tableData = [
      {
        documentNumber: 'SQ-SL202402054338',
        orderType: '1',
        applyDeptName: '汕头公司/潮州营业部',
        applyReason: '这是申请理由',
        applyTime: '2024-02-04 09:25:35',
        number: 10,
        userName: '张三四',
        storageLocationName: '潮州营业部',
        expectedDeliveryDate: '2024-02-28',
      },
      {
        documentNumber: 'SQ-SL202402054338',
        orderType: '2',
        applyDeptName: '汕头公司/潮州营业部',
        applyReason: '这是申请理由',
        applyTime: '2024-02-04 09:25:35',
        number: 10,
        userName: '张三四',
        storageLocationName: '潮州营业部',
        expectedDeliveryDate: '2024-02-28',
      },
      {
        documentNumber: 'SQ-SL202402054338',
        orderType: '3',
        applyDeptName: '汕头公司/潮州营业部',
        applyReason: '这是申请理由',
        applyTime: '2024-02-04 09:25:35',
        number: 10,
        userName: '张三四',
        storageLocationName: '潮州营业部',
        expectedDeliveryDate: '2024-02-28',
      },
      {
        documentNumber: 'SQ-SL202402054338',
        orderType: '4',
        applyDeptName: '汕头公司/潮州营业部',
        applyReason: '这是申请理由',
        applyTime: '2024-02-04 09:25:35',
        number: 10,
        userName: '张三四',
        storageLocationName: '潮州营业部',
        expectedDeliveryDate: '2024-02-28',
      },
    ]
  },
  methods: {
    //切换左侧菜单
    changeMenu(i){
      this.menuList.forEach((item,index)=>{
        if(i===index){
          item.active = true
        }
        else{
          item.active = false
        }
      })
    },
    //分页
    handleCurrentChangeList(val) {
      this.listPage.pageNo = val
    },
    handleSizeChangeList(val) {
      this.listPage.pageSize = val
    },
    //菜单名称
    getTypeName(row){
      let menu = this.menuList.find((item)=>{
        return item.value === row.type
      })
      return menu ? menu.text : ''
    },
    //待办状态名称
    getStatusName(row){
      if(row.status === '1'){
        return '已完成'
      }
      if(row.status === '0'){
        return row.type === '2' ? '未审核' : '未完成'
      }
      return ''
    },
    //日期筛选
    closeDateSearch(){
      this.showDateSearch = false
    },
    saveDateSearch(applyTimeStart,applyTimeEnd,auditTimeStart,auditTimeEnd){
      this.headFormData.applyTime = [applyTimeStart, applyTimeEnd]
      this.headFormData.auditTime = [auditTimeStart, auditTimeEnd]
      this.closeDateSearch()
    },
    //切换审核状态
    changeAuditStatus(status) {
      this.headFormData.auditStatus = status
      this.showStatusSearch = false
    },
    //打开新申请表单页
    openSubmit() {
      this.showSubmit.show = true
    },
    closeSubmit() {
      this.showSubmit.show = false
    },
  },
  watch: {
  },
};
</script>
<style lang="less" scoped>
@textColor: #1f1e1d;
@ntalkColor: #e67529;
@headHeight: 56px;
.my-pending-main {
  width: 100%;
  height: calc(100vh - 40px);
  overflow: hidden;
  background-color: #fff;
  position: relative;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  .head-row {
    width: 100%;
    height: @headHeight;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 16px;
    .left-head {
      display: flex;
      align-items: center;
      .head-logo {
        width: 32px;
        height: 32px;
      }
      .head-title {
        margin-left: 12px;
        color: @textColor;
        font-size: 16px;
        line-height: 24px;
      }
      .add-apply-btn {
        margin-left: 52px;
        display: flex;
        align-items: center;
        position: relative;
        background-color: #e67529;
        border-radius: 6px;
        padding: 5px 16px;
        cursor: pointer;
        .btn-text {
          line-height: 22px;
          font-size: 14px;
          color: #fff;
          margin-left: 8px;
        }
        .btn-img {
          width: 16px;
          height: 16px;
          transform: rotate(180deg);
        }
      }
    }
    .right-head {
      display: flex;
      align-items: center;
      .date-btn, .apply-type-btn, .status-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 94px;
        height: 24px;
        cursor: pointer;
        margin-right: 4px;
        position: relative;
        &:hover {
          background-color: #f2f3f6;
          border-radius: 4px;
        }
        span {
          color: rgba(0,0,0,0.66);
          font-size: 14px;
          padding-right: 8px;
        }
        img {
          width: 14px;
          height: 14px;
          transform: translateY(1px);
        }
      }
      .status-btn {
        .status-popup {
          width: 94px;
          box-sizing: border-box;
          position: absolute;
          padding: 4px;
          border-radius: 8px;
          box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05);
          top: 28px;
          left: 0;
          z-index: 3333;
          background-color: #fff;
          .status-item {
            width: 100%;
            box-sizing: border-box;
            height: 32px;
            line-height: 32px;
            padding-left: 12px;
            font-size: 14px;
            cursor: pointer;
            color: @textColor;
            white-space: nowrap;
            overflow: hidden;
            border-radius: 4px;
            &:hover {
              background-color: #f5f5f5;
            }
          }
        }
      }
    }
  }
  .content-row {
    width: 100%;
    height: calc(100% - @headHeight);
    background-color: #f1f2f5;
    display: flex;
    .left-menu {
      width: 160px;
      height: 100%;
      flex-shrink: 0;
      background-color: #fff;
      box-sizing: border-box;
      border-top: 1px solid #f1f2f5;
      transition: 0.5s;
      &.small {
        width: 58px;
      }
      .top {
        width: 100%;
        height: calc(100% - 42px);
        box-sizing: border-box;
        padding: 12px 8px 0;
        .search-box {
          width: 100%;
          height: 32px;
          box-sizing: border-box;
          border-radius: 6px;
          border: 1px solid rgba(0,0,0,0.15);
          padding-left: 12px;
          display: flex;
          align-items: center;
          margin-bottom: 16px;
          img {
            width: 16px;
            height: 16px;
            user-select: none;
          }
          input {
            width: calc(100% - 24px);
            all: unset;
            border: none;
            height: 22px;
            line-height: 22px;
            font-size: 14px;
            color: @textColor;
            margin-left: 8px;
            overflow: hidden;
            &::placeholder {
              color: #bebcb2;
            }
          }
        }
        .menu-item {
          width: 100%;
          display: flex;
          align-items: center;
          height: 42px;
          margin-bottom: 4px;
          border-radius: 4px;
          cursor: pointer;
          background-color: #fff;
          img {
            width: 16px;
            height: 16px;
            margin-left: 13px;
          }
          span {
            font-size: 14px;
            line-height: 22px;
            color: rgba(0,0,0,0.66);
            margin-left: 8px;
            white-space: nowrap;
            overflow: hidden;
          }
          &:hover {
            background-color: #f0f0f0;
          }
          &.active {
            background-color: #fff0e5;
            span { color: @ntalkColor; }
          }
        }
      }
      .bottom {
        width: 100%;
        height: 42px;
        box-sizing: border-box;
        border-top: 1px solid rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 17px;
        img {
          width: 24px;
          height: 24px;
          cursor: pointer;
        }
      }
    }
    .right-content {
      width: 100%;
      height: 100%;
      overflow: hidden;
      .list-box {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 16px;
        .table-box {
          width: 100%;
          height: 100%;
          background-color: #fff;
          border-radius: 6px;
          box-sizing: border-box;
          border: 1px solid #f0f0f0;
          overflow: hidden;
          .table-content {
            width: 100%;
            height: calc(100% - 56px);
            .table-table {
              width: 100%;
              height: 100%;
              /deep/ .td-orderType {
                display: flex;
                align-items: center;
                font-size: 12px;
                .td-orderType-btn {
                  border: 1px solid;
                  width: fit-content;
                  padding: 0 8px;
                  border-radius: 4px;
                  line-height: 20px;
                  font-size: 12px;
                  border: 1px solid;
                  &.btn0 {
                    color: #565551;
                    background-color: #f7f7f7;
                    border-color: #ebedef;
                  }
                  &.btn1 {
                    color: #1677ff;
                    background-color: #e6f4ff;
                    border-color: #91caff;
                  }
                  &.btn2 {
                    color: #faad14;
                    background-color: #fffbe6;
                    border-color: #ffe58f;
                  }
                  &.btn3 {
                    color: #52c41a;
                    background-color: #f6ffed;
                    border-color: #b7eb8f;
                  }
                  &.btn4 {
                    color: #f5222d;
                    background-color: #fff1f0;
                    border-color: #ffa39e;
                  }
                }
                .td-orderType-detail {
                  margin-left: 8px;
                  font-size: 12px;
                  cursor: pointer;
                  color: @ntalkColor;
                  &:hover {
                    text-decoration: underline;
                  }
                }
              }
              /deep/ .td-number {
                color: #1677ff;
                font-size: 14px;
                line-height: 22px;
                cursor: pointer;
                width: fit-content;
                &:hover {
                  text-decoration: underline;
                }
              }
              /deep/ .td-operate {
                display: flex;
                align-items: center;
                .td-operate-btn {
                  font-size: 14px;
                  line-height: 22px;
                  cursor: pointer;
                  margin-left: 10px;
                  color: #e67529;
                  &:first-child {
                    margin-left: 0;
                  }
                  &.danger {
                    color: #ff4040;
                  }
                }
              }
            }
          }
          .table-page {
            width: 100%;
            height: 56px;
            box-sizing: border-box;
            border-top: 1px solid #f2f3f6;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 12px;
            .total {
              color: rgba(0,0,0,0.66);
              font-size: 14px;
              line-height: 22px;
            }
            /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
              background-color: @ntalkColor;
            }
            /deep/ .el-pagination.is-background .el-pager li.active {
              background-color: @ntalkColor;
            }
            /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
              color: @ntalkColor;
            }
            /deep/ .el-pagination.is-background .el-pager li:hover {
              color: @ntalkColor;
            }
          }
        }
      }
    }
  }
}
</style>
